<template>
	<view class="foodpage">

		<view class="weekline">
			<view class="week">
				<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">
						<view class="picker">{{date}} <view class="iconfont icon-xiangxiabeifen"></view></view>
						
					</view>
				</picker>
			</view>
			
		</view>
		
		
<view class="back">
	<view class="datetab">
		<view class="itemdate " :class="tab=='day'?'act':''" @click="selecttab('day')">
			日
		</view>
		<view class="itemdate" :class="tab=='week'?'act':''" @click="selecttab('week')">
			周
		</view>
		<view class="itemdate" :class="tab=='month'?'act':''" @click="selecttab('month')">
			月
		</view>
	</view>
</view>

		<view class="chartbox">
			<view class="boxtitle">
				健走数据
			</view>
			<view class="topbox">
				<view class="chart1box" >
					<l-echart ref="chart1"></l-echart>
				</view>
			</view>
		</view>
		
		<view class="databox">
			<view class="boxtitle">
				运动处方
			</view>
			<view class="jindu">
				
			</view>
			<view class="dataline">
				<view class="itemdata">
					<view class="itemtop">
						<view class="topname">
							朝朝
						</view>
						<view class="toptype">
							未完成
						</view>
					</view>
					<view class="timeline">
						06:00~09:00 0/3000步
					</view>
				</view>
				<view class="itemdata">
					<view class="itemtop">
						<view class="topname">
							暮暮
						</view>
						<view class="toptype">
							未完成
						</view>
					</view>
					<view class="timeline">
						06:00~09:00 0/3000步
					</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<view class="bannertitle">
			健走分析
			</view>
			<view class="bannerline">
				<view class="itembanner">
					<view class="top">
						<view class="left">
							<view class="numbox">
								<view class="num">
									0
								</view>
								<view class="danwei">
									千卡
								</view>
							</view>
							<view class="label">
							消耗
							</view>
						</view>
						<view class="iconfont icon-tiaosheng1">
							
						</view>
					</view>
					<view class="bannerlabel">
						今天运动量有点少哦
					</view>
				</view>
				<view class="itembanner">
					<view class="top">
						<view class="left">
							<view class="numbox">
								<view class="num">
									0
								</view>
								<view class="danwei">
									千卡
								</view>
							</view>
							<view class="label">
							历程
							</view>
						</view>
						<view class="iconfont icon-tiaosheng1">
							
						</view>
					</view>
					<view class="bannerlabel">
						相当于绕1圈田径跑道
					</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<view class="bannertitle">
			万步统计
			</view>
		</view>
		







	
	</view>
</template>

<script>
	// import * as echarts from '../../pagesO/components/lime-echart/static/echarts.min.js'
	 import lEchart from '../../pagesO/components/lime-echart/components/l-echart/l-echart.vue'
	 import {changbanInfoEcharts,changbanInfoData } from '../../utils/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
			tab:'day',
			date:currentDate,
			
			}
		},
		components:{
		lEchart	
		},
		    computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
				
		    },
			

		mounted() {
			
			this.initChart1()
			
		},
		methods: {
	
			 bindDateChange: function(e) {
			            this.date = e.detail.value
			        },
					
			selecttab(e){
				this.tab=e
			},
			
			
 getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 10;
            } else if (type === 'end') {
                year = year + 10;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
		
		initChart1() {
				let option = {
					color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
			
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#283b56'
							}
						}
					},
					legend: {
						top:0
					},
					grid: {
						bottom: 10,
						left: 0,
						right: 20,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data:[10,12,1,3,14,15,16,],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					yAxis: [{
						type: 'value',
						// 格式化标签，只显示整数
						axisLabel: {
							color: '#666666',
							formatter: function(value) {
								
								return Math.round(value);
							}
						}
					}],
					
					series:[{
						type:'bar',
						data:[10,12,1,3,14,15,16,]
					}]
					
				}
		     
				this.$nextTick(() => {
					this.$refs.chart1.init(this.$echarts, chart1 => {
						chart1.setOption(option);
					});
				})
				}
			
								
			
		}
	}
</script>

<style lang="less" scoped>
.foodpage{
	width: 750rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,248,255,1) 100%);
	padding-bottom: 200rpx;


	.weekline{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		background-color: white;
		.week{
			margin: 0 30rpx;
			font-weight: bold;
			color: #1A4F8A;
			font-size: 32rpx;
			font-family: OPPOSans-black;
			display: flex;
			align-items: center;
			.picker{
				display: flex;
				align-items: center;
				position: relative;
			}
			.iconfont{
				color:#5c6fac;
				
			}
		}
		
	}
	.back{
		width: 100%;
		height: 120rpx;
		background-color: white;
		.datetab{
			width: 90%;
			height: 110rpx;
			display: flex;
			box-sizing: border-box;
			padding: 10rpx;
			border-radius: 20rpx;
			margin: auto;
			background-color: #F4F4F4 ;
			color:#656565  ;
			line-height: 90rpx;
			.itemdate{
				width:33%;
				height: 100%;
				text-align: center;
				border-radius: 20rpx;
			}
			.act{
				background-color: white;
				font-weight: bold;
				color: #494949 ;
			}
			
		}
	}
		.chartbox{
			width: 100%;
			box-sizing: border-box;
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx 20rpx 40rpx 30rpx;
			.boxtitle{
				font-size: 30rpx;
				font-weight: bold;
				border-left: 8rpx solid #1A4F8A;
				height: 30rpx;
				padding-left: 30rpx;
				line-height: 30rpx;
			}
			.topbox{
				width: 100%;
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-left: 10rpx;
				margin-top: 30rpx;
				.chart1box{
					width: 710rpx;
					height: 450rpx;
					
					
				}
				
			}
		}
		
		.databox{
			width: 94%;
			margin: 20rpx auto;
			background: white;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			.boxtitle{
				font-weight: bold;
			}
			.jindu{
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid whitesmoke;
			}
			.dataline{
				width: 100%;
				display: flex;
				align-items: center;
				.itemdata{
					width: 50%;
					.itemtop{
						display: flex;
						align-items: center;
						 height: 80rpx;
						 line-height: 80rpx;
						 justify-content: space-evenly;
						 .toptype{
							 width: 100rpx;
							 height: 40rpx;
							 line-height: 40rpx;
							 border-radius: 20rpx;
							 color: white;
							 text-align: center;
							 background-color: gray;
							 font-size: 28rpx;
						 }
					}
					.timeline{
						font-size: 26rpx;
					}
					
				}
				
			}
		}
		
		.banner{
			width: 94%;
			margin: 20rpx auto;
			background: white;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			.bannertitle{
				font-weight: bold;
			}
			.bannerline{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.itembanner{
					width: 48%;
					margin: 1%;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 20rpx;
					background-color: #f2f8ff;
					.top{
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						.left{
							width: 70%;
							line-height: 2.5;
							.numbox{
								display: flex;
								align-items: center;
							}
							
						}
						.iconfont{
							font-size: 60rpx;
							color: #1A4F8A;
						}
						
					}
					.bannerlabel{
						font-size: 26rpx;
					}
				}
			}
		}
		

	
	




	
	
}
</style>
